<template>
	<view class="visitor-list-container">
		<!-- 常用观众列表 -->
		<view class="visitor-list">
			<view class="visitor-item" v-for="(item, index) in visitorList" :key="index">
				<view class="visitor-info">
					<view class="visitor-name">{{item.name}}</view>
					<view class="visitor-details">
						<view class="visitor-id-card">
							<text class="label">身份证：</text>
							<text>{{formatIdCard(item.idCard)}}</text>
						</view>
						<view class="visitor-phone">
							<text class="label">手机号：</text>
							<text>{{formatPhone(item.phone)}}</text>
						</view>
					</view>
				</view>
				<view class="visitor-actions">
					<button class="action-btn edit-btn" @click="editVisitor(item)">
						<text class="btn-text">编辑</text>
					</button>
					<button class="action-btn delete-btn" @click="deleteVisitor(item)">
						<text class="btn-text">删除</text>
					</button>
				</view>
			</view>
			
			<view class="empty-tip" v-if="visitorList.length === 0">
				<image src="/static/empty.png" mode="aspectFit" class="empty-icon"></image>
				<text>暂无常用观众</text>
				<text class="empty-sub-text">添加常用观众可以更快地完成预约</text>
			</view>
		</view>
		
		<!-- 添加观众按钮 -->
		<button class="add-btn" type="primary" @click="showAddVisitorDialog">
			<text class="btn-icon">+</text>
			<text>添加常用观众</text>
		</button>
		
		<!-- 添加/编辑观众弹窗 -->
		<view class="visitor-dialog" v-if="showDialog">
			<view class="dialog-mask" @click="closeDialog"></view>
			<view class="dialog-content">
				<view class="dialog-header">
					<view class="dialog-title">{{isEdit ? '编辑观众' : '添加观众'}}</view>
					<view class="dialog-close" @click="closeDialog">×</view>
				</view>
				
				<view class="dialog-form">
					<view class="form-item">
						<text class="form-label">姓名</text>
						<input type="text" v-model="currentVisitor.name" placeholder="请输入姓名" />
					</view>
					
					<view class="form-item">
						<text class="form-label">身份证号</text>
						<input type="idcard" maxlength="18" v-model="currentVisitor.idCard" placeholder="请输入身份证号" />
					</view>
					
					<view class="form-item">
						<text class="form-label">手机号</text>
						<input type="number" maxlength="11" v-model="currentVisitor.phone" placeholder="请输入手机号" />
					</view>
				</view>
				
				<view class="dialog-actions">
					<button class="dialog-btn cancel-btn" @click="closeDialog">取消</button>
					<button class="dialog-btn confirm-btn" @click="saveVisitor">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getVisitorList, addVisitor, updateVisitor, deleteVisitor } from '@/api/visitor.js';
	
	export default {
		data() {
			return {
				userId: '',
				visitorList: [],
				showDialog: false,
				isEdit: false,
				currentVisitor: {
					id: '',
					name: '',
					idCard: '',
					phone: ''
				},
				originalIndex: -1
			}
		},
		onLoad(options) {
			// 检查是否是从预约页面跳转来的选择模式
			this.selectMode = options.mode === 'select';
			
			// 获取用户ID
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo && userInfo.id) {
				this.userId = userInfo.id;
				this.loadVisitorList();
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 加载常用观众列表
			async loadVisitorList() {
				uni.showLoading({
					title: '加载中...'
				});
				
				try {
					const res = await getVisitorList(this.userId);
					if (res.data) {
						this.visitorList = res.data;
					}
				} catch (error) {
					console.error('获取常用观众失败', error);
					uni.showToast({
						title: '获取常用观众失败',
						icon: 'none'
					});
					
					// 模拟数据
					this.visitorList = [
						{
							id: '1',
							name: '张三',
							idCard: '110101199001011234',
							phone: '13800138000'
						},
						{
							id: '2',
							name: '李四',
							idCard: '110101199002022345',
							phone: '13900139000'
						}
					];
				} finally {
					uni.hideLoading();
				}
			},
			
			// 格式化身份证号
			formatIdCard(idCard) {
				if (!idCard) return '';
				return idCard.replace(/^(.{6})(.*)(.{4})$/, '$1********$3');
			},
			
			// 格式化手机号
			formatPhone(phone) {
				if (!phone) return '';
				return phone.replace(/^(.{3})(.*)(.{4})$/, '$1****$3');
			},
			
			// 显示添加观众弹窗
			showAddVisitorDialog() {
				this.isEdit = false;
				this.currentVisitor = {
					id: '',
					name: '',
					idCard: '',
					phone: ''
				};
				this.showDialog = true;
			},
			
			// 显示编辑观众弹窗
			editVisitor(visitor) {
				this.isEdit = true;
				this.originalIndex = this.visitorList.findIndex(v => v.id === visitor.id);
				this.currentVisitor = { ...visitor };
				this.showDialog = true;
			},
			
			// 关闭弹窗
			closeDialog() {
				this.showDialog = false;
			},
			
			// 保存观众信息
			async saveVisitor() {
				// 表单验证
				if (!this.currentVisitor.name.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}
				
				if (!/^\d{17}[\dX]$/.test(this.currentVisitor.idCard)) {
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
					});
					return;
				}
				
				if (!/^1\d{10}$/.test(this.currentVisitor.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '保存中...'
				});
				
				try {
					if (this.isEdit) {
						// 编辑模式
						await updateVisitor(this.currentVisitor);
						// 更新本地列表
						this.visitorList[this.originalIndex] = { ...this.currentVisitor };
					} else {
						// 添加模式
						const res = await addVisitor({
							...this.currentVisitor,
							userId: this.userId
						});
						// 添加到本地列表
						if (res.data) {
							this.visitorList.push(res.data);
						} else {
							// 模拟添加
							this.currentVisitor.id = Date.now().toString();
							this.visitorList.push({ ...this.currentVisitor });
						}
					}
					
					uni.hideLoading();
					uni.showToast({
						title: this.isEdit ? '编辑成功' : '添加成功',
						icon: 'success'
					});
					
					this.closeDialog();
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				}
			},
			
			// 删除观众
			deleteVisitor(visitor) {
				uni.showModal({
					title: '提示',
					content: '确定删除该观众信息吗？',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...'
							});
							
							try {
								await deleteVisitor(visitor.id);
								// 从本地列表中移除
								const index = this.visitorList.findIndex(v => v.id === visitor.id);
								if (index > -1) {
									this.visitorList.splice(index, 1);
								}
								
								uni.hideLoading();
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
							} catch (error) {
								uni.hideLoading();
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.visitor-list-container {
		padding: 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #f8f9fa;
		
		.visitor-list {
			margin-bottom: 40rpx;
			
			.visitor-item {
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				background-color: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
				transition: all 0.3s;
				
				&:active {
					transform: scale(0.99);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				}
				
				.visitor-info {
					flex: 1;
					margin-bottom: 20rpx;
					
					.visitor-name {
						font-size: 34rpx;
						font-weight: 600;
						margin-bottom: 16rpx;
						color: #333;
					}
					
					.visitor-details {
						display: flex;
						flex-direction: column;
						gap: 8rpx;
					}
					
					.visitor-id-card, .visitor-phone {
						font-size: 28rpx;
						color: #666;
						display: flex;
						
						.label {
							color: #999;
							margin-right: 8rpx;
						}
					}
				}
				
				.visitor-actions {
					display: flex;
					justify-content: flex-end;
					border-top: 1px solid #f0f0f0;
					padding-top: 20rpx;
					
					.action-btn {
						height: 64rpx;
						min-width: 140rpx;
						font-size: 28rpx;
						margin-left: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 32rpx;
						transition: all 0.3s;
						padding: 0 24rpx;
						
						&.edit-btn {
							background-color: rgba(74, 107, 223, 0.1);
							color: #4a6bdf;
							border: 1px solid rgba(74, 107, 223, 0.3);
							
							&:active {
								opacity: 0.8;
							}
						}
						
						&.delete-btn {
							background-color: rgba(255, 59, 48, 0.1);
							color: #ff3b30;
							border: 1px solid rgba(255, 59, 48, 0.3);
							
							&:active {
								opacity: 0.8;
							}
						}
						
						.btn-text {
							font-size: 28rpx;
							line-height: 1;
						}
					}
				}
			}
			
			.empty-tip {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 100rpx 0;
				
				.empty-icon {
					width: 200rpx;
					height: 200rpx;
					margin-bottom: 20rpx;
					opacity: 0.8;
				}
				
				text {
					font-size: 30rpx;
					color: #999;
					margin-bottom: 10rpx;
				}
				
				.empty-sub-text {
					font-size: 26rpx;
					color: #bbb;
				}
			}
		}
		
		.add-btn {
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			background: linear-gradient(135deg, #4a6bdf, #644ae8);
			box-shadow: 0 8rpx 16rpx rgba(74, 107, 223, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;
			
			&:active {
				transform: translateY(3rpx);
				box-shadow: 0 4rpx 8rpx rgba(74, 107, 223, 0.3);
			}
			
			.btn-icon {
				font-size: 38rpx;
				margin-right: 10rpx;
				font-weight: 300;
			}
		}
		
		.visitor-dialog {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 999;
			
			.dialog-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
				backdrop-filter: blur(2px);
			}
			
			.dialog-content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #ffffff;
				border-radius: 24rpx 24rpx 0 0;
				padding: 40rpx 30rpx;
				animation: slideUp 0.3s ease;
				
				.dialog-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 40rpx;
					
					.dialog-title {
						font-size: 36rpx;
						font-weight: 600;
						color: #333;
					}
					
					.dialog-close {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 48rpx;
						color: #999;
						border-radius: 50%;
						
						&:active {
							background-color: #f5f5f5;
						}
					}
				}
				
				.dialog-form {
					.form-item {
						margin-bottom: 30rpx;
						
						.form-label {
							display: block;
							font-size: 28rpx;
							color: #666;
							margin-bottom: 12rpx;
						}
						
						input {
							height: 80rpx;
							border-bottom: 1px solid #eee;
							font-size: 32rpx;
						}
					}
				}
				
				.dialog-actions {
					display: flex;
					margin-top: 40rpx;
					gap: 20rpx;
					
					.dialog-btn {
						flex: 1;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 32rpx;
						border-radius: 45rpx;
						font-weight: 500;
						transition: all 0.3s;
						
						&.cancel-btn {
							background-color: #f5f5f5;
							color: #666;
							
							&:active {
								background-color: #e8e8e8;
							}
						}
						
						&.confirm-btn {
							background: linear-gradient(135deg, #4a6bdf, #644ae8);
							color: #ffffff;
							box-shadow: 0 4rpx 8rpx rgba(74, 107, 223, 0.3);
							
							&:active {
								opacity: 0.9;
								transform: translateY(3rpx);
							}
						}
					}
				}
			}
		}
	}
	
	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}
</style> 